<template>
	<view>
		<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
		<view class="top-loc-search">
			<view class="location" @click="show = true">
				<view>{{userLocation.city}}</view>
				<uni-icons type="down" size="18"></uni-icons>
			</view>
			<view class="search-content" @click="handleToSearch">
				<image src="../../static/index/search.png" mode=""></image>
				<input type="text" v-model="keyname" confirm-type="搜索" @confirm="confirm"	 placeholder="请输入关键词" placeholder-class="input-placeholder" />
				<!-- <view class="search-btn" @click="toSearch()">搜索</view> -->
			</view>
		</view>
		<view class="addres-list">
			<view class="list-title">
				附近地址
			</view>
			
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="lists">
					<view class="each-lines" style="border-bottom:10rpx solid #F5F7F8;" @click="chooseLoaccurrent()">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/index/ding2.png" mode=""></image>
						<view class="" style="max-width: 70%;">
							<view class="address-name">{{currentPosition.address && currentPosition.address.poiName ?currentPosition.address && currentPosition.address.poiName:'暂无位置'}}</view>
							<view v-if="$util.phoneType() != 'ios'" >
								{{currentPosition.address && currentPosition.address.street?currentPosition.address && currentPosition.address.street:''}}
							</view>
						</view>
						<view class="loc-icon" @click.stop="getUserLocation">
							<image src="https://qiniu-cdn.maeiyun.com/imgs/index/loccc.png" mode=""></image>当前位置
						</view>
					</view>
					<view class="each-lines" v-for="(item,index) in lists"  @click="chooseLoac(item)" :key="index">
						<!-- <image src="https://qiniu-cdn.maeiyun.com/imgs/index/ding1.png" mode=""></image> -->
						<image src="https://qiniu-cdn.maeiyun.com/imgs/index/ding2.png" mode=""></image>
						<view class="">
							<view class="address-name">{{item.name}}</view>
							<view>
								{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view>
			<u-popup v-model="show" mode="right" width="750" safe-area-inset-bottom>
				<t-index-address @select="select"></t-index-address>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { wgs84_to_gcj02 } from "../../common/js/wgs84_to_gcj02.js"
	import { mapState } from 'vuex'//引入mapState
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				location: {},
				keyname: "",
				show: false,
				lists: [],
				downOption:{
					auto:false
				},
				url:'index/regeo',
				obj :{
					location:""
				},
				page:1,
			}
		},
		computed: {
			  ...mapState({'userLocation':'userLocation','currentPosition':'currentPosition'})
		},
		onLoad() {
			this.obj = {
				location:this.userLocation.longitude +','+this.userLocation.latitude
			}
		},
		methods: {
			getUserLocation() {
				var that = this
				uni.showLoading({
					mask: true
				})
				this.$util.getLocation(res => {
					if (res) {
						this.request.httpTokenRequest({
							url: "movie/getCityCode",
							method: "get"
						}, {
							name: res.address.city
						}).then(function(data) {
							uni.hideLoading()
							if (data.code == 0) {
								that.$store.commit('changeLocation', {
									cityCode: data.data.cityCode,
									cityName: data.data.cityName,
									regionCode: "",
									regionName: "",
									longitude: res.longitude,
									latitude: res.latitude,
									name: res.address.poiName || res.address.street || '',
								})
							} else {}
						})
						let location = {}
						let address = res.address
						address.poiName = res.address.street
						if(that.$util.phoneType() == 'ios'){
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.city || '',
								city: res.address.city || '',
								address: address,
								cityname: res.address.city || ''
							}
						}else{
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.province || '',
								city: res.address.city || '',
								address: res.address,
								cityname: res.address.city || ''
							}
						}
						
						
						that.$store.commit('changeUserLocation', location)
						that.$store.commit('changeCurrentPosition', location)
						that.locationData = location
					} else {
						that.request.httpTokenRequest({
							url: "movie/getCityCode",
							method: "get"
						}, {
							name: '北京'
						}).then(function(data) {
							uni.hideLoading()
							if (data.code == 0) {
								that.$store.commit('changeLocation', {
									cityCode: data.data.cityCode,
									cityName: data.data.cityName,
									regionCode: "",
									regionName: "",
									longitude: res.longitude,
									latitude: res.latitude,
								})
								let location = {
									latitude: '40.144',
									longitude: '116.280',
									province: '北京',
									city: '北京市',
									cityname:'北京市'
								}
								that.$store.commit('changeUserLocation', location)
								that.$store.commit('changeCurrentPosition', location)
								that.locationData = location
							} else {}
						})
					}
				})
				uni.hideLoading()
			},
			back() {
				uni.navigateBack()
			},
			handleToSearch() {
			},
			chooseLoaccurrent(){
				let location = {
					city: this.currentPosition.cityname,
					cityname:this.currentPosition.cityname,
					latitude: this.currentPosition.latitude,
					longitude: this.currentPosition.longitude,
					address:this.currentPosition.addres,
					specificlocation:this.currentPosition.address.poiName
				}
				this.getMovieAddress(location)
				this.$store.commit('changeUserLocation', location)
				uni.navigateBack()
			},
			chooseLoac(item){
				let location = {
					city: item.cityname,
					cityname:item.cityname,
					latitude: item.location.split(",")[1],
					longitude: item.location.split(",")[0],
					address:item.address,
					specificlocation:item.name
				}
				this.getMovieAddress(item)
				this.$store.commit('changeUserLocation', location)
				uni.navigateBack()
			},
			confirm(data){
				this.url = 'index/inputtips'
				this.page = 1
				this.obj = {
					city:this.userLocation.city,
					page:this.page,
					keywords:this.keyname
				}
				uni.pageScrollTo({
					scrollTop:0
				})
				this.downCallback()
			},
			getMovieAddress(item){
				let that = this
				this.request.httpTokenRequest({
					url: "movie/getCityCode",
					method: "get"
				}, {
					name: item.cityname
				}).then(function(data) {
					uni.hideLoading()
					if (data.code == 0) {
						that.$store.commit('changeLocation', {
							cityCode: data.data.cityCode,
							cityName: data.data.cityName,
							regionCode: "",
							regionName: "",
							latitude: item.location.split(",")[1],
							longitude: item.location.split(",")[0],
							name: item.address || item.cityname || '北京',
						})
					} else {}
				})
			},
			select(e) {
				this.show = false
				var obj = wgs84_to_gcj02(Number(e.lng),Number(e.lat))
				let location = {
					city: e.name,
					province: e.province,
					latitude: obj[1],
					longitude: obj[0],
					cityname:e.name
				}
				let that = this
				this.request.httpTokenRequest({
					url: "movie/getCityCode",
					method: "get"
				}, {
					name: e.name
				}).then(function(data) {
					uni.hideLoading()
					if (data.code == 0) {
						that.$store.commit('changeLocation', {
							cityCode: data.data.cityCode,
							cityName: data.data.cityName,
							regionCode: "",
							regionName: "",
							latitude: e.lat,
							longitude: e.lng,
							name: e.name || '北京',
						})
					} else {}
				})
				this.$store.commit('changeUserLocation', location)
				this.url = 'index/inputtips'
				this.page = 1
				this.obj = {
					city:e.name,
					page:this.page
				}
				this.downCallback()
			},
			downCallback() {
				this.lists = []
				this.page = 1
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this
				this.request.httpTokenRequest({
					url: this.url,
					method: "post"
				},this.obj).then(function(data) {
					if (data.code == 0) {
						that.lists = [...that.lists,...data.data]
						that.page ++
						that.mescroll.endSuccess(that.lists.length); 
					} else {}
				})
			}
		}
	}
</script>
<style lang="scss">
	.top-loc-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		padding: 30rpx;
		z-index: 99;
		width: 100%;
		background-color: #F5F7F8;
		.back {
			width: 20rpx;
			height: 32rpx;
			flex: 0 0 auto;
		}

		.location {
			width: fit-content;
			height: 64rpx;
			margin-left: 24rpx;
			line-height: 64rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			flex: 1;
			margin-right: 24rpx;

			image {
				width: 22rpx;
				height: 30rpx;
				margin-right: 13rpx;
				flex: 0 0 auto;
				margin-left: 8rpx;
			}

			view {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.search-content {
			max-width: 80%;
			width: fit-content;
			height: 64rpx;
			display: flex;
			align-items: center;
			border-radius: 32rpx;
			background-color: #fff;
			padding-left: 31rpx;
			border: 1rpx solid #BEBEC0;

			input {
				max-width: 80%;
				font-size: 28rpx;
			}

			.lines {
				width: 1rpx;
				height: 30rpx;
				border: 1rpx solid #C4C3C3;
				margin-right: 10rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}

			.input-placeholder {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A9A9A9;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
				margin-left: auto;
				margin-right: 7rpx;
			}
		}
	}

	.addres-list {
		background-color: #fff;
		padding: 20rpx 30rpx 30rpx 30rpx;
		border-radius: 10rpx;

		.list-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
			line-height: 37rpx;
		}

		.lists {
			.each-lines {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #D0D0D0;
				padding: 21rpx 0;

				image {
					width: 23rpx;
					height: 29rpx;
					margin-right: 25rpx;
				}

				.address-name {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 10rpx;
				}
				.loc-icon{
					margin-left: auto;
					display: flex;
					align-items: center;
					image{
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
					
				}
			}
		}
	}
</style>